/**
 * Created by lcw on 2017/3/27.
 */
import React, {Component} from 'react';
import {
    ListView,
    TextInput,
    ScrollView,
    StyleSheet,
    Text,
    Image,
    TouchableOpacity,
    View
} from 'react-native';
import NavigationBar from '../../common/NavigationBar';

import Button from 'apsl-react-native-button';
import ImagePicker from 'react-native-image-picker';
const Info = require('./Info');
const infos = [];

export default class InfoRegist extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows(Info),
            logoSource: null,
            papersSource: null,
        };
    }

    pickImage(text) {
        const options = {
            title: '选择图片',
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '拍照',
            chooseFromLibraryButtonTitle: '从相册选择',
            storageOptions: {
                skipBackup: true,
                path: 'images'
            }
        };
        ImagePicker.showImagePicker(options, (response) => {
            console.log('Response.fileName = ', response.fileName);

            if (response.didCancel) {
                console.log('User cancelled image picker');
            }
            else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            }
            else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            } else {
                let source = {uri: response.uri};
                if (text === 'LOGO') {
                    this.setState({
                        logoSource: source
                    });
                } else if (text === '三证') {
                    this.setState({
                        papersSource: source
                    });
                }
            }
        });
    }

    _pop = () => {
        this.props.navigator.pop();
    }

    render() {
        return (
            <View style={styles.container}>
                <NavigationBar
                    title={'公司信息登记'}
                    leftAction={this._pop}
                />
                <ScrollView style={styles.parent}>
                    <ListView dataSource={this.state.dataSource} style={{margin: 5}}
                              renderRow={(rowData) => this.renderRow(rowData)}/>
                    {InfoRegist.logoText('公司LOGO(可选)')}
                    <TouchableOpacity style={{width: 120}} onPress={() => this.pickImage('LOGO')}>
                        <Image style={styles.cameraImage}
                               source={this.state.logoSource === null ? require('./image/camera.png') : this.state.logoSource}/>
                    </TouchableOpacity>
                    {InfoRegist.logoText('公司三证(可选)')}
                    <TouchableOpacity style={{width: 120}} onPress={() => this.pickImage('三证')}>
                        <Image style={styles.cameraImage}
                               source={this.state.papersSource === null ? require('./image/camera.png') : this.state.papersSource}/>
                    </TouchableOpacity>
                    <View style={{height: 1, backgroundColor: '#D7D7D7', marginTop: 5}}/>
                    <Button style={{margin: 20, backgroundColor: '#EE8800', borderWidth: 0}}
                            textStyle={{color: '#FFFFFF'}}
                            onPress={() => InfoRegist.submit()}>
                        提交公司信息
                    </Button>
                </ScrollView>
            </View>
        );
    }

    renderRow(rowData) {
        let index = rowData.index;
        if (index === 0) {
            return (
                <View style={InfoRegist.inputStyle(index)}>
                    <TextInput
                        style={styles.input}
                        placeholder={rowData.title}
                        underlineColorAndroid={'transparent'}
                        onChangeText={(text) => InfoRegist.textChanged(text, index)}
                    />
                    <TouchableOpacity
                        onPress={() => {
                            alert('sousuo');
                        }}>
                        <Image source={require('./image/search.png')} style={{width: 18, height: 19, marginRight: 5}}/>
                    </TouchableOpacity>
                </View>
            );
        } else {
            return (
                <View style={InfoRegist.inputStyle(index)}>
                    <TextInput
                        style={styles.input}
                        placeholder={rowData.title}
                        underlineColorAndroid={'transparent'}
                        multiline={index === 5}
                        onChangeText={(text) => InfoRegist.textChanged(text, index)}
                    />
                </View>
            );
        }
    }

    static logoText(text) {
        return (
            <View style={{marginTop: 5, marginBottom: 5}}>
                <View style={{height: 1, backgroundColor: '#D7D7D7'}}/>
                <Text style={styles.textStyle}>{text}</Text>
                <View style={{height: 1, backgroundColor: '#D7D7D7'}}/>
            </View>
        );
    }


    static inputStyle(index) {
        return (
            {
                flexDirection: 'row',
                alignItems: index === 5 ? 'flex-start' : 'center',
                height: index === 5 ? 60 : 40,
                borderWidth: 0.3,
                borderRadius: 2,
                padding: 2,
                margin: 1
            }
        );
    }

    static textChanged(text, index) {
        infos[index] = text;
    }

    static submit() {
        for (let i = 0; i < 6; i++) {
            console.log(infos[i]);
        }
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF',
    },
    parent: {
        flex: 1,
        backgroundColor: '#FFFFFF',
        flexDirection: 'column'
    },
    input: {
        flex: 1,
        padding: 0
    },
    textStyle: {
        color: '#EE8800',
        fontSize: 18,
        padding: 10,
        backgroundColor: '#F1F1F1'
    },
    cameraImage: {
        borderWidth: 1,
        borderColor: '#D7D7D7',
        margin: 10,
        width: 100,
        height: 100
    }
});
